<!DOCTYPE html>
<html lang="en">

<head>

        <meta charset="UTF-8">
        <title>研究成果</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/researchFindings.css">

    <script type="text/javascript" src="https://repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>

    <script type="text/javascript" src="https://repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link type="text/css" rel="stylesheet" href="https://repo.bfw.wiki/bfwrepo/css/swiper-bundle.11.0.4.css">


    <style>
        html,body {
            /*overflow-x: hidden; !* 隐藏水平滚动条 *!*/
            overflow-y: hidden; /* 隐藏垂直滚动条 */
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        @media (max-width: 768px) {
            .swiper-slide {
                /* 在小屏幕上设置更小的宽度 */
                width: 90%;
            }
        }

        :root {
            --shadow-color: #a6a6a6;
            --shadow-color-light: #b8b8b8;
        }
        #myCanvas{
            position:relative;
            width: auto;
            height: 100%;
        }
        #myCanvas canvas{
            background: #000000;
            height: 100%;
            width: 100%;
            position: fixed;
        }
        *:not(style, head),
        *::before,
        *::after {
            box-sizing: border-box;
        }
        body article {
            z-index: 1;
            top:125px;
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .sectionWrapper {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
        }
        .swiper {
            width: 100%;
            height: 100%;
            padding: 50px 20px;
            overflow: visible;
        }
        .swiper .parallax-bg {
            position: absolute;
            right: -5%;
            top: -50%;
            width: 200%;
            height: 200%;
            background-image: url("https://rb.gy/wk4c6n");
            background-size: cover;
            background-position: top center;
            background-repeat: no-repeat;
        }
        .swiper .swiper-wrapper {
            align-items: center;
        }

        .swiper .swiper-slide {
            position: relative;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            background-color: rgb(33, 35, 35);
            border-radius: 7px;
            padding: 10px;
            margin: 0;
            cursor: grab;
            user-select: none;
            text-wrap: revert;
        }

        .swiper .swiper-slide::before {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 80px;
            height: 80px;
            border-bottom: 1px dashed white;
            border-right: 1px solid white;
            border-radius: 0 0 7px 0;
            content: "";
            transition: all 0.3s ease;
        }

        .swiper .swiper-slide::after {
            position: absolute;
            top: 0;
            left: 0;
            width: 80px;
            height: 80px;
            border-top: 1px solid white;
            border-left: 1px dashed white;
            border-radius: 7px 0 0 0;
            content: "";
            transition: all 0.3s ease;
        }

        .swiper .swiper-slide:hover {
            background: linear-gradient(
                    135deg,
                    rgba(18, 17, 17, 0.6),
                    rgba(43, 42, 43, 0.6),
                    rgba(73, 70, 70, 0.6),
                    rgba(89, 86, 87, 0.6),
                    rgba(117, 112, 117, 0.6),
                    rgba(143, 139, 145, 0.6),
                    rgba(166, 163, 170, 0.6),
                    rgba(174, 174, 182, 0.6),
                    rgba(191, 191, 200, 0.6),
                    rgba(187, 187, 195, 0.85),
                    rgb(203, 203, 213),
                    #efebeb
            );
        }

        .swiper .swiper-slide:hover::before,
        .swiper .swiper-slide:hover::after {
            width: 170px;
            height: 170px;
            transition: all 0.3s ease;
        }

        .swiper .swiper-slide .cardPopout {
            width: 100%;
            height: 100%;
            background-color: rgb(101, 97, 97);
            border-radius: 7px;
            padding: 20px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
        }

        .swiper .swiper-slide img {
            width: 100%;
            height: auto;
            margin-bottom: 25px;
            border-radius: 5px;
        }

        .swiper .swiper-slide h2 {
            font-size: 200%;
            line-height: 110%;
            margin: 0 0 7px 0;
            color: white;
            font-family: "Nabla", system-ui;
            font-variation-settings: "EDPT" 100, "EHLT" 24;
            background-color: #111;
            border-radius: 100%;
        }

        .swiper .swiper-slide h4 {
            font-size: 110%;
            line-height: 120%;
            font-weight: 700;
            margin: 0 0 13px 0;
            color: #e6dcdc;
            font-style: italic;
        }

        .swiper .swiper-slide figcaption {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            margin: 0 0 20px 0;
            padding-left: 20px;
            border-left: 1px solid white;
        }

        .swiper .swiper-slide figcaption p {
            color: #191717;
            margin: 0;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .swiper .swiper-slide a {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
            background-color: black;
            color: white;
            border-radius: 3px;
            text-decoration: none;
            overflow: hidden;
            z-index: 1;
            transition: all 0.6s ease !important;
        }

        .swiper .swiper-slide a:hover {
            color: black;
            transition: all 0.6s ease;
        }

        .swiper .swiper-slide a::after {
            position: absolute;
            right: 100%;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            content: "";
            z-index: -1;
            transition: all 0.6s ease;
        }

        .swiper .swiper-slide a:hover::after {
            right: 0;
            transition: all 0.6s ease;
        }

        .swiper .swiper-slide a svg {
            width: 23px;
            height: auto;
            fill: white;
            margin-left: 5px;
            transition: all 0.6s ease;
        }

        .swiper .swiper-slide a:hover svg {
            margin-left: 10px;
            fill: black;
            transition: all 0.6s ease;
        }

        .swiper .swiper-scrollbar {
            --swiper-scrollbar-bottom: 0px;
            --swiper-scrollbar-size: 10px;
        }

        @media (max-height: 550px) {
            .swiper .swiper-slide figcaption p {
                -webkit-line-clamp: 2;
            }
        }

        @media (max-height: 490px) {
            .swiper .swiper-slide figcaption p {
                -webkit-line-clamp: 1;
            }
        }

        @media (max-height: 460px) {
            .swiper .swiper-slide figcaption p {
                display: none;
            }
            .swiper .swiper-slide h4 {
                margin: 0;
            }
        }

        @media (max-height: 430px) {
            .swiper .swiper-wrapper {
                position: relative;
                bottom: 6px;
            }
        }

        @media (max-width: 750px) {
            .swiper .parallax-bg {
                width: 320%;
            }
        }
    </style>

</head>

<body>
<div class="myCanvas" id="myCanvas">
    <div class="head">
        <div class="logo">
            <a href="index.html"><img src="imgs/index/ESDC_logo.jpg" alt=""></a>
            <div class="logo_name">
                <h1>&nbsp;工&nbsp;程&nbsp;软&nbsp;件&nbsp;研&nbsp;发&nbsp;中&nbsp;心</h1>
                <p>&nbsp;Engineering Software Development Centre</p>
            </div>
        </div>
        <div class="top_list">
            <ul>
                <li><a href="visitor.html">访客</a></li>
<!--                <li><a href="">邮箱</a></li>-->
                <li class="dropdown"><a href="">联系我们</a>
                    <div class="dropdown-content">
                        <p>电话：123-456-7890</p>
                        <p>邮箱：contact@example.com</p>
                        <p>地址：北京市朝阳区</p>
                    </div>
                </li>
                <li id="userProfileBtn" style="display: none;">
                    <a href="javascript:void(0);" onclick="showPersonalBox()">用户名</a>
                </li>
                <li id="loginRegisterBtn">
                    <a href="javascript:void(0);" onclick="showLoginBox()">登录</a><span>/</span><a href="javascript:void(0);" onclick="showRegistrationBox()">注册</a>
                </li>
            </ul>
        </div>
        <div class="bottom_nav">
            <ul>
                <li><a href="aboutUs.html">关于我们</a></li>
                <li><a href="researchFindings.html">研究成果</a></li>
                <li><a href="newsEvents.html">新闻活动</a></li>
                <li><a href="cooperation.html">合作交流</a></li>
            </ul>
        </div>
        <div class="test"></div>
    </div>
    <article>
        <section class="sectionWrapper">
            <section class="swiper">
                <div class="swiper-wrapper">
<!--                    在这里动态展示-->
                </div>
            </section>
        </section>
    </article>
    <canvas></canvas>
</div>
<div class="canvasTTL">
    <p class="logo-1">研究成果</p>
</div>

<script src="js/window.js"></script>
<script type="text/javascript" src="https://repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
<script type="text/javascript" src="https://repo.bfw.wiki/bfwrepo/js/swiper-bundle.11.0.4.js"></script>

<script>
    const swiper = new Swiper(".swiper", {
        direction: "horizontal",
        loop: false,
        speed: 1500,
        slidesPerView: 4,
        spaceBetween: 60,
        mousewheel: true,
        parallax: true,
        centeredSlides: true,
        effect: "coverflow",
        coverflowEffect: {
            rotate: 40,
            slideShadows: true },

        autoplay: {
            delay: 2000,
            pauseOnMouseEnter: true },

        scrollbar: {
            el: ".swiper-scrollbar" },

        breakpoints: {
            0: {
                slidesPerView: 1,
                spaceBetween: 60 },

            600: {
                slidesPerView: 2,
                spaceBetween: 60 },

            1000: {
                slidesPerView: 3,
                spaceBetween: 60 },

            1400: {
                slidesPerView: 4,
                spaceBetween: 60 },

            2300: {
                slidesPerView: 5,
                spaceBetween: 60 },

            2900: {
                slidesPerView: 6,
                spaceBetween: 60 } } });

</script>
<script>
    window.addEventListener('gesturestart', function (e) {
        e.preventDefault();
    });
    (function(){

        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;

        var canvas = document.querySelector("canvas");
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight;

        var ctx = canvas.getContext("2d");

        ctx.globalCompositeOperation = "saturation"; //合成方法


        var particles = [];

        var pIndex = 0;
        var frameId;


        function Particle(color,x,y,circleSize,radius){
            this.color = color;
            this.x = 0;
            this.y = 0;
            this.posX = x;
            this.posY = y;

            this.circleSize = circleSize;

            this.direction = getRandom(-1,1);

            this.wave;
            this.amplitude = getRandom(-50,50);
            this.waveSpeed = getRandom(2,3);
            this.speed = getRandom(1,2);

            particles[pIndex] = this;
            this.id = pIndex;
            pIndex++;

            this.radius = radius;
            this.count = 0;
        };

        Particle.prototype.draw = function(){
            this.radius += Math.sin(this.count*0.1);

            this.wave = Math.sin( Math.PI/180*this.count*this.waveSpeed * this.direction ) * this.amplitude;

            this.x = Math.sin( Math.PI/180*this.count * this.speed * this.direction ) * this.circleSize - this.radius/2 + this.wave + this.posX;
            this.y = Math.cos( Math.PI/180*this.count * this.speed * this.direction) * this.circleSize - this.radius/2 + this.wave + this.posY;

            this.count += 1;

            var colA = hex2rgba(this.color,1);
            var colB = hex2rgba(this.color,0);

            var grd = ctx.createRadialGradient( this.x+this.radius/2,  this.y+this.radius/2,  0,  this.x+this.radius/2,  this.y+this.radius/2, this.radius/2);
            grd.addColorStop(0, colA);
            grd.addColorStop(1,  colB);

            ctx.fillStyle = grd;
            ctx.beginPath();
            ctx.fillRect( this.x, this.y, this.radius, this.radius );
            ctx.closePath();
            ctx.fill();

        }



        var colorTips = [
            '#000000',
            '#ffffff',
            '#8e9190',
            '#404040',
            '#5a5252'
        ]

        for(var i = 0; i < 30; i++){
            var r = Math.floor( getRandom(0,colorTips.length) );
            new Particle( colorTips[r], getRandom(0,canvas.width/2), getRandom(0,canvas.height), getRandom(-canvas.width,canvas.width),getRandom(500,1000));
        }

        function loop(){
            ctx.clearRect(0,0, canvas.width, canvas.height);  //画面更新

            //Particle描画
            for(var i in particles){
                particles[i].draw();
            }

            frameId = requestAnimationFrame(loop);
            if(frameId % 2 === 0) { return; }//60fps
            stats.update();
        }

        loop();


        window.addEventListener("resize", function(){
            // canvas.width = window.innerWidth;
            // canvas.height = window.innerHeight;
            // x = canvas.width / 2;
            // y = canvas.height / 2;
        });


        function getRandom(min, max) {
            return Math.random() * (max - min) + min;
        }


        function hex2rgba (hex, alpha = 1) {


            let r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
            let c = null
            if (r) {
                c = r.slice(1,4).map(function(x) { return parseInt(x, 16) })
            }

            r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i)
            if (r) {
                c = r.slice(1,4).map(function(x) { return 0x11 * parseInt(x, 16) })
            }

            if (!c) {
                return null
            }
            return `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${alpha})`
        }


    })();
</script>

<script src="js/axios-0.18.0.js"></script>
<script src="js/window.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        function fetchResearchResults() {
            return axios.get('http://localhost:8080/javaweb_project/researchServlet/selectAllResults');
        }

        function initResearchSwiper(researchResults) {
            const swiperContainer = document.querySelector('.swiper-wrapper');
            swiperContainer.innerHTML = ''; // 清空现有的轮播项

            researchResults.forEach(result => {
                const imgSrc = `imgs/researchFinding/project${result.resultId}.png`; // 构建图片路径
                const slideHtml = `
                <figure class="swiper-slide">
                    <div class="cardPopout" data-swiper-parallax="30" data-swiper-parallax-scale="0.9" data-swiper-parallax-opacity="0.8" data-swiper-parallax-duration="1000">
                        <img src="${imgSrc}" alt="${result.title}" width="800" height="400" data-swiper-parallax="80" data-swiper-parallax-duration="2000">
                        <h2 class="title" data-swiper-parallax="80" data-swiper-parallax-duration="1000">
                                ${result.title}
                        </h2>
                        <h4 class="subtitle" data-swiper-parallax="80" data-swiper-parallax-duration="1500">
                                ${result.type}
                        </h4>
                        <figcaption data-swiper-parallax="80" data-swiper-parallax-duration="1250">
                        <p>
                                ${result.description}
                        </p>
                        </figcaption>
                        <a href="javascript:void(0);" title="Continue Reading" data-swiper-parallax="80" data-swiper-parallax-opacity="0.2" data-swiper-parallax-duration="1750">
                            © 2024 ESDC Inc
                                <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8" />
                            </svg>
                        </a>
                    </div>
                </figure>
            `;
                swiperContainer.innerHTML += slideHtml;
            });
        }

        fetchResearchResults().then(function (response) {
            initResearchSwiper(response.data); // 确保传递response.data
        }).catch(function (error) {
            console.error('Error fetching research results:', error);
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
    window.addEventListener('message', function(event) {
    if (event.data.action === 'loginSuccess') {
    onLoginSuccess(event.data.username);
    } else if (event.data.action === 'registerSuccess') {
    onRegisterSuccess(event.data.username);
    }
    });

    function onLoginSuccess(username) {
    updateUserInfo(username);
    }

    function onRegisterSuccess(username) {
    updateUserInfo(username);
    }

    function updateUserInfo(username) {
    const userProfileBtn = document.getElementById('userProfileBtn');
    const loginRegisterBtn = document.getElementById('loginRegisterBtn');

    if (userProfileBtn && loginRegisterBtn) {
    userProfileBtn.querySelector('a').innerText = username;
    userProfileBtn.style.display = 'inline'; // 显示用户名按钮,inline保证不被换行
    loginRegisterBtn.style.display = 'none'; // 隐藏登录注册按钮
    } else {
    console.error('User profile or login register button not found');
    }
    }
    });

    // 页面加载完成后检查登录状态并更新界面
    document.addEventListener('DOMContentLoaded', function() {
    // checkLoginStatus() 来检查登录状态,如果用户已登录，更新界面
    checkLoginStatus();
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        checkLoginStatus(); // 检查登录状态并更新界面
    });

    function checkLoginStatus() {
        const username = localStorage.getItem('username');
        if (username) {
            updateUserInfo(username);
        } else {
            // 如果没有用户名，则显示登录注册按钮
            const loginRegisterBtn = document.getElementById('loginRegisterBtn');
            const userProfileBtn = document.getElementById('userProfileBtn');
            loginRegisterBtn.style.display = 'inline';
            userProfileBtn.style.display = 'none';
        }
    }

    function updateUserInfo(username) {
        const userProfileBtn = document.getElementById('userProfileBtn');
        const loginRegisterBtn = document.getElementById('loginRegisterBtn');

        if (userProfileBtn && loginRegisterBtn) {
            userProfileBtn.querySelector('a').innerText = username;
            userProfileBtn.style.display = 'inline'; // 显示用户名按钮,inline保证不被换行
            loginRegisterBtn.style.display = 'none'; // 隐藏登录注册按钮
        } else {
            console.error('User profile or login register button not found');
        }
    }
</script>
</body>

</html>